<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>市级管理 - 粮食收购大数据平台</title>
    <!-- Element Plus CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <!-- Vue 3 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <!-- Element Plus JS -->
    <script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
    <!-- Element Plus Icons -->
    <script src="https://unpkg.com/@element-plus/icons-vue/dist/index.iife.js"></script>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            margin: 0;
            padding: 20px;
            background-color: #f5f7fa;
            font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
        }
        .page-container {
            max-width: 1400px;
            margin: 0 auto;
        }
        .page-header {
            background: white;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .page-title {
            font-size: 24px;
            font-weight: 600;
            color: #333;
            margin: 0;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .page-title i {
            color: #4CAF50;
        }
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 20px;
        }
        .stat-card {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            text-align: center;
        }
        .stat-icon {
            font-size: 32px;
            margin-bottom: 10px;
        }
        .stat-icon.total { color: #409EFF; }
        .stat-icon.active { color: #67C23A; }
        .stat-icon.districts { color: #E6A23C; }
        .stat-icon.population { color: #F56C6C; }
        .stat-value {
            font-size: 28px;
            font-weight: 600;
            color: #333;
            margin-bottom: 5px;
        }
        .stat-label {
            font-size: 14px;
            color: #666;
        }
        .content-card {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .search-bar {
            display: flex;
            gap: 15px;
            margin-bottom: 20px;
            flex-wrap: wrap;
            align-items: center;
        }
        .search-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .search-item label {
            font-size: 14px;
            color: #666;
            white-space: nowrap;
        }
        .table-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        .table-title {
            font-size: 16px;
            font-weight: 600;
            color: #333;
        }
        .city-level {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 12px;
            color: white;
        }
        .city-level.prefecture { background-color: #409EFF; }
        .city-level.county { background-color: #67C23A; }
        .city-level.autonomous { background-color: #E6A23C; }
        .city-level.special { background-color: #F56C6C; }
        .dialog-form {
            padding: 20px 0;
        }
        .form-section {
            margin-bottom: 20px;
        }
        .form-section-title {
            font-size: 14px;
            font-weight: 600;
            color: #333;
            margin-bottom: 10px;
            border-left: 3px solid #4CAF50;
            padding-left: 10px;
        }
        @media (max-width: 768px) {
            .search-bar {
                flex-direction: column;
                align-items: stretch;
            }
            .search-item {
                flex-direction: column;
                align-items: stretch;
            }
            .table-header {
                flex-direction: column;
                gap: 10px;
                align-items: stretch;
            }
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="page-container">
            <!-- 页面头部 -->
            <div class="page-header">
                <h1 class="page-title">
                    <i class="fas fa-city"></i>
                    市级管理
                </h1>
            </div>

            <!-- 统计卡片 -->
            <div class="stats-grid">
                <div class="stat-card">
                    <div class="stat-icon total">
                        <i class="fas fa-city"></i>
                    </div>
                    <div class="stat-value">{{ totalCities }}</div>
                    <div class="stat-label">总市数</div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon active">
                        <i class="fas fa-check-circle"></i>
                    </div>
                    <div class="stat-value">{{ activeCities }}</div>
                    <div class="stat-label">启用市</div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon districts">
                        <i class="fas fa-map-marker-alt"></i>
                    </div>
                    <div class="stat-value">{{ totalDistricts }}</div>
                    <div class="stat-label">下辖区县</div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon population">
                        <i class="fas fa-users"></i>
                    </div>
                    <div class="stat-value">{{ totalPopulation }}万</div>
                    <div class="stat-label">总人口</div>
                </div>
            </div>

            <!-- 主要内容 -->
            <div class="content-card">
                <!-- 搜索栏 -->
                <div class="search-bar">
                    <div class="search-item">
                        <label>关键词：</label>
                        <el-input
                            v-model="searchForm.keyword"
                            placeholder="请输入市名称或代码"
                            style="width: 200px;"
                            clearable>
                        </el-input>
                    </div>
                    <div class="search-item">
                        <label>所属省份：</label>
                        <el-select v-model="searchForm.provinceId" placeholder="请选择省份" style="width: 150px;" clearable>
                            <el-option v-for="province in provinceList" :key="province.id" :label="province.name" :value="province.id"></el-option>
                        </el-select>
                    </div>
                    <div class="search-item">
                        <label>城市级别：</label>
                        <el-select v-model="searchForm.cityLevel" placeholder="请选择级别" style="width: 120px;" clearable>
                            <el-option label="地级市" value="prefecture"></el-option>
                            <el-option label="县级市" value="county"></el-option>
                            <el-option label="自治州" value="autonomous"></el-option>
                            <el-option label="特别行政区" value="special"></el-option>
                        </el-select>
                    </div>
                    <div class="search-item">
                        <label>状态：</label>
                        <el-select v-model="searchForm.status" placeholder="请选择状态" style="width: 100px;" clearable>
                            <el-option label="启用" value="1"></el-option>
                            <el-option label="禁用" value="0"></el-option>
                        </el-select>
                    </div>
                    <el-button type="primary" @click="searchCities">
                        <i class="fas fa-search"></i> 搜索
                    </el-button>
                    <el-button @click="resetSearch">
                        <i class="fas fa-redo"></i> 重置
                    </el-button>
                </div>

                <!-- 表格头部 -->
                <div class="table-header">
                    <div class="table-title">市级列表</div>
                    <div>
                        <el-button type="primary" @click="showAddDialog">
                            <i class="fas fa-plus"></i> 新增市
                        </el-button>
                        <el-button type="success" @click="exportData">
                            <i class="fas fa-download"></i> 导出数据
                        </el-button>
                        <el-button type="warning" @click="batchImport">
                            <i class="fas fa-upload"></i> 批量导入
                        </el-button>
                    </div>
                </div>

                <!-- 数据表格 -->
                <el-table :data="filteredCities" style="width: 100%" v-loading="loading">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="cityCode" label="城市代码" width="100" sortable></el-table-column>
                    <el-table-column prop="cityName" label="城市名称" width="150">
                        <template #default="scope">
                            <strong>{{ scope.row.cityName }}</strong>
                        </template>
                    </el-table-column>
                    <el-table-column prop="provinceName" label="所属省份" width="120"></el-table-column>
                    <el-table-column prop="cityLevel" label="城市级别" width="100">
                        <template #default="scope">
                            <span :class="`city-level ${scope.row.cityLevel}`">
                                {{ getCityLevelText(scope.row.cityLevel) }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="shortName" label="简称" width="80"></el-table-column>
                    <el-table-column prop="zipCode" label="邮政编码" width="100"></el-table-column>
                    <el-table-column prop="areaCode" label="区号" width="80"></el-table-column>
                    <el-table-column prop="area" label="面积(km²)" width="100" sortable>
                        <template #default="scope">
                            <span>{{ scope.row.area?.toLocaleString() }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="population" label="人口(万)" width="100" sortable>
                        <template #default="scope">
                            <span>{{ scope.row.population?.toLocaleString() }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="districtCount" label="下辖区县" width="100">
                        <template #default="scope">
                            <el-tag type="info">{{ scope.row.districtCount }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="gdp" label="GDP(亿元)" width="120" sortable>
                        <template #default="scope">
                            <span>{{ scope.row.gdp?.toLocaleString() }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="status" label="状态" width="80">
                        <template #default="scope">
                            <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
                                {{ scope.row.status === 1 ? '启用' : '禁用' }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间" width="180" sortable></el-table-column>
                    <el-table-column label="操作" width="200" fixed="right">
                        <template #default="scope">
                            <el-button size="small" @click="viewCity(scope.row)">
                                <i class="fas fa-eye"></i> 查看
                            </el-button>
                            <el-button size="small" type="primary" @click="editCity(scope.row)">
                                <i class="fas fa-edit"></i> 编辑
                            </el-button>
                            <el-button size="small" type="danger" @click="deleteCity(scope.row)">
                                <i class="fas fa-trash"></i> 删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <!-- 分页 -->
                <div style="margin-top: 20px; text-align: center;">
                    <el-pagination
                        v-model:current-page="currentPage"
                        v-model:page-size="pageSize"
                        :page-sizes="[10, 20, 50, 100]"
                        :total="totalCount"
                        layout="total, sizes, prev, pager, next, jumper">
                    </el-pagination>
                </div>
            </div>
        </div>

        <!-- 新增/编辑对话框 -->
        <el-dialog
            :title="dialogTitle"
            v-model="dialogVisible"
            width="700px"
            :before-close="handleClose">
            <div class="dialog-form">
                <el-form :model="cityForm" :rules="rules" ref="cityFormRef" label-width="100px">
                    <div class="form-section">
                        <div class="form-section-title">基本信息</div>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="城市代码" prop="cityCode">
                                    <el-input v-model="cityForm.cityCode" placeholder="请输入城市代码"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="城市名称" prop="cityName">
                                    <el-input v-model="cityForm.cityName" placeholder="请输入城市名称"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="所属省份" prop="provinceId">
                                    <el-select v-model="cityForm.provinceId" placeholder="请选择省份" style="width: 100%;">
                                        <el-option v-for="province in provinceList" :key="province.id" :label="province.name" :value="province.id"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="城市级别" prop="cityLevel">
                                    <el-select v-model="cityForm.cityLevel" placeholder="请选择城市级别" style="width: 100%;">
                                        <el-option label="地级市" value="prefecture"></el-option>
                                        <el-option label="县级市" value="county"></el-option>
                                        <el-option label="自治州" value="autonomous"></el-option>
                                        <el-option label="特别行政区" value="special"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="城市简称" prop="shortName">
                                    <el-input v-model="cityForm.shortName" placeholder="请输入城市简称"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="邮政编码" prop="zipCode">
                                    <el-input v-model="cityForm.zipCode" placeholder="请输入邮政编码"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="区号" prop="areaCode">
                                    <el-input v-model="cityForm.areaCode" placeholder="请输入区号"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="状态" prop="status">
                                    <el-radio-group v-model="cityForm.status">
                                        <el-radio :label="1">启用</el-radio>
                                        <el-radio :label="0">禁用</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                    
                    <div class="form-section">
                        <div class="form-section-title">详细信息</div>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="面积(km²)" prop="area">
                                    <el-input-number v-model="cityForm.area" :min="0" :precision="2" style="width: 100%;"></el-input-number>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="人口(万)" prop="population">
                                    <el-input-number v-model="cityForm.population" :min="0" :precision="2" style="width: 100%;"></el-input-number>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="GDP(亿元)" prop="gdp">
                                    <el-input-number v-model="cityForm.gdp" :min="0" :precision="2" style="width: 100%;"></el-input-number>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="下辖区县数" prop="districtCount">
                                    <el-input-number v-model="cityForm.districtCount" :min="0" style="width: 100%;"></el-input-number>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-form-item label="城市描述" prop="description">
                            <el-input type="textarea" v-model="cityForm.description" placeholder="请输入城市描述" :rows="3"></el-input>
                        </el-form-item>
                    </div>
                </el-form>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="saveCity">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>

    <script>
        const { createApp, ref, computed, onMounted } = Vue;
        const { ElMessage, ElMessageBox } = ElementPlus;

        createApp({
            setup() {
                // 响应式数据
                const loading = ref(false);
                const currentPage = ref(1);
                const pageSize = ref(20);
                const totalCount = ref(0);
                const dialogVisible = ref(false);
                const isEdit = ref(false);
                
                // 搜索表单
                const searchForm = ref({
                    keyword: '',
                    provinceId: '',
                    cityLevel: '',
                    status: ''
                });
                
                // 城市表单
                const cityForm = ref({
                    id: null,
                    cityCode: '',
                    cityName: '',
                    provinceId: '',
                    cityLevel: '',
                    shortName: '',
                    zipCode: '',
                    areaCode: '',
                    area: null,
                    population: null,
                    gdp: null,
                    districtCount: 0,
                    description: '',
                    status: 1
                });
                
                // 表单验证规则
                const rules = {
                    cityCode: [{ required: true, message: '请输入城市代码', trigger: 'blur' }],
                    cityName: [{ required: true, message: '请输入城市名称', trigger: 'blur' }],
                    provinceId: [{ required: true, message: '请选择所属省份', trigger: 'change' }],
                    cityLevel: [{ required: true, message: '请选择城市级别', trigger: 'change' }]
                };
                
                // 省份列表
                const provinceList = ref([
                    { id: 1, name: '北京市' },
                    { id: 2, name: '天津市' },
                    { id: 3, name: '河北省' },
                    { id: 4, name: '山西省' },
                    { id: 5, name: '内蒙古自治区' },
                    { id: 6, name: '辽宁省' },
                    { id: 7, name: '吉林省' },
                    { id: 8, name: '黑龙江省' },
                    { id: 9, name: '上海市' },
                    { id: 10, name: '江苏省' },
                    { id: 11, name: '浙江省' },
                    { id: 12, name: '安徽省' },
                    { id: 13, name: '福建省' },
                    { id: 14, name: '江西省' },
                    { id: 15, name: '山东省' },
                    { id: 16, name: '河南省' },
                    { id: 17, name: '湖北省' },
                    { id: 18, name: '湖南省' },
                    { id: 19, name: '广东省' },
                    { id: 20, name: '广西壮族自治区' },
                    { id: 21, name: '海南省' },
                    { id: 22, name: '重庆市' },
                    { id: 23, name: '四川省' },
                    { id: 24, name: '贵州省' },
                    { id: 25, name: '云南省' },
                    { id: 26, name: '西藏自治区' },
                    { id: 27, name: '陕西省' },
                    { id: 28, name: '甘肃省' },
                    { id: 29, name: '青海省' },
                    { id: 30, name: '宁夏回族自治区' },
                    { id: 31, name: '新疆维吾尔自治区' },
                    { id: 32, name: '新疆生产建设兵团' }
                ]);
                
                // 模拟城市数据
                const cityList = ref([
                    {
                        id: 1,
                        cityCode: '110100',
                        cityName: '北京市',
                        provinceId: 1,
                        provinceName: '北京市',
                        cityLevel: 'special',
                        shortName: '京',
                        zipCode: '100000',
                        areaCode: '010',
                        area: 16410.54,
                        population: 2189.3,
                        gdp: 40269.6,
                        districtCount: 16,
                        description: '中华人民共和国首都，全国政治、文化、国际交往、科技创新中心',
                        status: 1,
                        createTime: '2024-01-15 10:30:00'
                    },
                    {
                        id: 2,
                        cityCode: '120100',
                        cityName: '天津市',
                        provinceId: 2,
                        provinceName: '天津市',
                        cityLevel: 'special',
                        shortName: '津',
                        zipCode: '300000',
                        areaCode: '022',
                        area: 11966.45,
                        population: 1386.6,
                        gdp: 15695.1,
                        districtCount: 16,
                        description: '中国北方重要的港口城市，环渤海地区经济中心',
                        status: 1,
                        createTime: '2024-01-15 10:31:00'
                    },
                    {
                        id: 3,
                        cityCode: '130100',
                        cityName: '石家庄市',
                        provinceId: 3,
                        provinceName: '河北省',
                        cityLevel: 'prefecture',
                        shortName: '石',
                        zipCode: '050000',
                        areaCode: '0311',
                        area: 15848.0,
                        population: 1120.47,
                        gdp: 6490.3,
                        districtCount: 23,
                        description: '河北省省会，京津冀地区重要的中心城市',
                        status: 1,
                        createTime: '2024-01-15 10:32:00'
                    },
                    {
                        id: 4,
                        cityCode: '130200',
                        cityName: '唐山市',
                        provinceId: 3,
                        provinceName: '河北省',
                        cityLevel: 'prefecture',
                        shortName: '唐',
                        zipCode: '063000',
                        areaCode: '0315',
                        area: 13472.0,
                        population: 769.7,
                        gdp: 8230.6,
                        districtCount: 15,
                        description: '河北省重要的工业城市，中国近代工业的摇篮',
                        status: 1,
                        createTime: '2024-01-15 10:33:00'
                    },
                    {
                        id: 5,
                        cityCode: '310100',
                        cityName: '上海市',
                        provinceId: 9,
                        provinceName: '上海市',
                        cityLevel: 'special',
                        shortName: '沪',
                        zipCode: '200000',
                        areaCode: '021',
                        area: 6340.5,
                        population: 2487.09,
                        gdp: 43214.85,
                        districtCount: 16,
                        description: '中国经济、金融、贸易、航运、科技创新中心',
                        status: 1,
                        createTime: '2024-01-15 10:34:00'
                    },
                    {
                        id: 6,
                        cityCode: '320100',
                        cityName: '南京市',
                        provinceId: 10,
                        provinceName: '江苏省',
                        cityLevel: 'prefecture',
                        shortName: '宁',
                        zipCode: '210000',
                        areaCode: '025',
                        area: 6587.02,
                        population: 931.47,
                        gdp: 16355.33,
                        districtCount: 11,
                        description: '江苏省省会，长江三角洲特大城市',
                        status: 1,
                        createTime: '2024-01-15 10:35:00'
                    },
                    {
                        id: 7,
                        cityCode: '330100',
                        cityName: '杭州市',
                        provinceId: 11,
                        provinceName: '浙江省',
                        cityLevel: 'prefecture',
                        shortName: '杭',
                        zipCode: '310000',
                        areaCode: '0571',
                        area: 16853.57,
                        population: 1220.4,
                        gdp: 18109.0,
                        districtCount: 13,
                        description: '浙江省省会，长江三角洲中心城市之一',
                        status: 1,
                        createTime: '2024-01-15 10:36:00'
                    },
                    {
                        id: 8,
                        cityCode: '440100',
                        cityName: '广州市',
                        provinceId: 19,
                        provinceName: '广东省',
                        cityLevel: 'prefecture',
                        shortName: '穗',
                        zipCode: '510000',
                        areaCode: '020',
                        area: 7434.4,
                        population: 1867.66,
                        gdp: 28231.97,
                        districtCount: 11,
                        description: '广东省省会，粤港澳大湾区中心城市',
                        status: 1,
                        createTime: '2024-01-15 10:37:00'
                    },
                    {
                        id: 9,
                        cityCode: '440300',
                        cityName: '深圳市',
                        provinceId: 19,
                        provinceName: '广东省',
                        cityLevel: 'prefecture',
                        shortName: '深',
                        zipCode: '518000',
                        areaCode: '0755',
                        area: 1997.47,
                        population: 1756.01,
                        gdp: 32387.68,
                        districtCount: 10,
                        description: '中国经济特区，全球科技创新中心',
                        status: 1,
                        createTime: '2024-01-15 10:38:00'
                    },
                    {
                        id: 10,
                        cityCode: '500100',
                        cityName: '重庆市',
                        provinceId: 22,
                        provinceName: '重庆市',
                        cityLevel: 'special',
                        shortName: '渝',
                        zipCode: '400000',
                        areaCode: '023',
                        area: 82402.95,
                        population: 3212.43,
                        gdp: 27894.02,
                        districtCount: 38,
                        description: '中国直辖市，长江上游地区经济中心',
                        status: 1,
                        createTime: '2024-01-15 10:39:00'
                    }
                ]);
                
                // 计算属性
                const totalCities = computed(() => cityList.value.length);
                const activeCities = computed(() => cityList.value.filter(city => city.status === 1).length);
                const totalDistricts = computed(() => cityList.value.reduce((sum, city) => sum + city.districtCount, 0));
                const totalPopulation = computed(() => Math.round(cityList.value.reduce((sum, city) => sum + city.population, 0)));
                
                const dialogTitle = computed(() => isEdit.value ? '编辑城市' : '新增城市');
                
                const filteredCities = computed(() => {
                    let filtered = cityList.value;
                    
                    if (searchForm.value.keyword) {
                        const keyword = searchForm.value.keyword.toLowerCase();
                        filtered = filtered.filter(city => 
                            city.cityName.toLowerCase().includes(keyword) ||
                            city.cityCode.includes(keyword)
                        );
                    }
                    
                    if (searchForm.value.provinceId) {
                        filtered = filtered.filter(city => city.provinceId === searchForm.value.provinceId);
                    }
                    
                    if (searchForm.value.cityLevel) {
                        filtered = filtered.filter(city => city.cityLevel === searchForm.value.cityLevel);
                    }
                    
                    if (searchForm.value.status !== '') {
                        filtered = filtered.filter(city => city.status === parseInt(searchForm.value.status));
                    }
                    
                    totalCount.value = filtered.length;
                    return filtered;
                });
                
                // 方法
                const getCityLevelText = (level) => {
                    const levelMap = {
                        'prefecture': '地级市',
                        'county': '县级市',
                        'autonomous': '自治州',
                        'special': '直辖市'
                    };
                    return levelMap[level] || '未知';
                };
                
                const searchCities = () => {
                    loading.value = true;
                    setTimeout(() => {
                        loading.value = false;
                        ElMessage.success('搜索完成');
                    }, 500);
                };
                
                const resetSearch = () => {
                    searchForm.value = {
                        keyword: '',
                        provinceId: '',
                        cityLevel: '',
                        status: ''
                    };
                    ElMessage.info('搜索条件已重置');
                };
                
                const showAddDialog = () => {
                    isEdit.value = false;
                    cityForm.value = {
                        id: null,
                        cityCode: '',
                        cityName: '',
                        provinceId: '',
                        cityLevel: '',
                        shortName: '',
                        zipCode: '',
                        areaCode: '',
                        area: null,
                        population: null,
                        gdp: null,
                        districtCount: 0,
                        description: '',
                        status: 1
                    };
                    dialogVisible.value = true;
                };
                
                const viewCity = (city) => {
                    ElMessage.info(`查看城市：${city.cityName}`);
                };
                
                const editCity = (city) => {
                    isEdit.value = true;
                    cityForm.value = { ...city };
                    dialogVisible.value = true;
                };
                
                const deleteCity = (city) => {
                    ElMessageBox.confirm(
                        `确定要删除城市 "${city.cityName}" 吗？`,
                        '确认删除',
                        {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning',
                        }
                    ).then(() => {
                        const index = cityList.value.findIndex(c => c.id === city.id);
                        if (index > -1) {
                            cityList.value.splice(index, 1);
                            ElMessage.success('删除成功');
                        }
                    }).catch(() => {
                        ElMessage.info('已取消删除');
                    });
                };
                
                const saveCity = () => {
                    if (isEdit.value) {
                        // 编辑城市
                        const index = cityList.value.findIndex(c => c.id === cityForm.value.id);
                        if (index > -1) {
                            // 更新省份名称
                            const province = provinceList.value.find(p => p.id === cityForm.value.provinceId);
                            cityForm.value.provinceName = province ? province.name : '';
                            
                            cityList.value[index] = { ...cityForm.value };
                            ElMessage.success('城市更新成功');
                        }
                    } else {
                        // 新增城市
                        const province = provinceList.value.find(p => p.id === cityForm.value.provinceId);
                        const newCity = {
                            ...cityForm.value,
                            id: Date.now(),
                            provinceName: province ? province.name : '',
                            createTime: new Date().toLocaleString('zh-CN')
                        };
                        cityList.value.unshift(newCity);
                        ElMessage.success('城市创建成功');
                    }
                    
                    dialogVisible.value = false;
                };
                
                const handleClose = () => {
                    dialogVisible.value = false;
                };
                
                const exportData = () => {
                    ElMessage.success('数据导出功能开发中...');
                };
                
                const batchImport = () => {
                    ElMessage.success('批量导入功能开发中...');
                };
                
                // 生命周期
                onMounted(() => {
                    // 初始化数据
                });
                
                return {
                    loading,
                    currentPage,
                    pageSize,
                    totalCount,
                    dialogVisible,
                    isEdit,
                    searchForm,
                    cityForm,
                    rules,
                    provinceList,
                    cityList,
                    totalCities,
                    activeCities,
                    totalDistricts,
                    totalPopulation,
                    dialogTitle,
                    filteredCities,
                    getCityLevelText,
                    searchCities,
                    resetSearch,
                    showAddDialog,
                    viewCity,
                    editCity,
                    deleteCity,
                    saveCity,
                    handleClose,
                    exportData,
                    batchImport
                };
            }
        }).use(ElementPlus).mount('#app');
    </script>
</body>
</html>